<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>会议室管理系统</title>

<!-- Icons -->
<link rel="shortcut icon" href="assets/media/favicons/favicon.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/media/favicons/favicon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/media/favicons/apple-touch-icon-180x180.png">
<!-- END Icons -->
<link rel="stylesheet" id="css-main" href="assets/css/oneui.min.css">
<style>
    #DataTables_Table_3_wrapper{
        position: relative;
    }
    .ly-row{
        position: absolute;
        top: 8px;
        z-index: 10;
    }
    .dt-buttons{
        text-align: right;
    }
</style>
</head>
<body>
<div id="page-container" class="sidebar-o sidebar-dark side-scroll page-header-fixed">
    <div class="sidebar"></div>
    <!-- Header -->
    <div class="header"></div>
    <!-- END Header -->

    <!-- Main Container -->
    <main id="main-container">
        <div class="block">
            <div class="block-content block-content-full">
                <div id="DataTables_Table_3_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="ly-row">
                        <button type="button" class="btn btn-sm btn-primary" id="add-mtRoom">添加会议室</button>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table
                                class="table table-bordered table-striped table-vcenter js-dataTable-buttons dataTable no-footer"
                                id="DataTables_Table_3" role="grid" aria-describedby="DataTables_Table_3_info">
                                <thead>
                                    <tr role="row">
                                        <th class="text-center sorting_asc" style="width: 30px;" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-sort="ascending"
                                            aria-label="ID: activate to sort column descending">序号</th>
                                        <th class="sorting" style="width: 20%;" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-label="Name: activate to sort column ascending">会议室名</th>
                                        <th class="d-none d-sm-table-cell sorting" style="width: 40%;" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-label="Email: activate to sort column ascending">配置</th>
                                        <th class="d-none d-sm-table-cell sorting" style="width: 10%;" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-label="Email: activate to sort column ascending">容量</th>
                                        <th class="d-none d-sm-table-cell sorting" style="width: 15%;" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-label="Access: activate to sort column ascending">状态</th>
                                        <th style="width: 8%;" class="sorting" tabindex="0"
                                            aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                            aria-label="Registered: activate to sort column ascending">操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 此处为动态生成表格 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- END Main Container -->

    <!-- Footer -->
    <div class="footer"></div>

    <div class="modal" id="modal-block-normal" tabindex="-1" role="dialog" aria-labelledby="modal-block-normal"
        aria-modal="true" style="display: none; padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">请输入会议室信息</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="fa fa-fw fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content font-size-sm">
                        <form enctype="multipart/form-data" class="add-form">
                            <div class="row push">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-10 col-xl-7">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="rName" name="rName" placeholder="会议室名">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="config" name="config" placeholder="请输入会议室设施，使用,号隔开">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="number" name="number" placeholder="请输入会议室容量">
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="state" name="state">
                                            <option value="0">未使用</option>
                                            <option value="1">使用中</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-content block-content-full text-right border-top">
                        <button type="button" class="btn btn-sm btn-light" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" id="add-submit">
                            <i class="fa fa-check mr-1"></i>Ok
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/oneui.core.min.js"></script>
<script src="assets/js/oneui.app.min.js"></script>
<script src="assets/js/public.js"></script>
<script>
    ;(async ()=>{
        const mrRes = await $.get("http://localhost:3000/meetingroom");
        let str = "";
        for (let i = 0; i < mrRes.data.length; i++) {
            let mrData = mrRes.data[i];
            str += `<tr role="row" class="odd">
                    <td class="text-center font-size-sm sorting_1">${i + 1}</td>
                    <td class="font-w600 font-size-sm">
                        <span class="text-muted">${mrData.rName}</span>
                    </td>
                    <td class="d-none d-sm-table-cell font-size-sm">
                        <span class="text-muted">${mrData.config}</span>
                    </td>
                    <td class="d-none d-sm-table-cell font-size-sm">
                        <span class="text-muted">${mrData.number}</span>
                    </td>
                    <td class="d-none d-sm-table-cell font-size-sm">
                        <span class="badge badge-${mrData.state ? "warning" : "success"} font-size-sm">${mrData.state ? "使用中" : "未使用"}</span>
                    </td>
                    <td class="text-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light js-tooltip-enabled set-mtRoom" data-toggle="tooltip" data-id="${mrData.rId}" data-original-title="Edit Client">
                                <i class="fa fa-fw fa-pencil-alt"></i>
                            </button>
                        </div>
                    </td>
                </tr>`
        }
        $("tbody").html(str);

        // 会议室表单功能状态：0添加，1修改
        let formState = 0;

        // 打开添加会议室表单
        $("#add-mtRoom").click(function(){
            $('#modal-block-normal').modal('show');
            if(formState === 1){
                $("#rName").val("");
                $("#config").val("");
                $("#number").val("");
                $("#state").val("0");
            }
            $("#state").attr("disabled","disabled")
            formState = 0;
        })

        let rId;

        // 打开修改会议室表单
        $(".set-mtRoom").click(async function(){
            $('#modal-block-normal').modal('show');
            rId = $(this)[0].dataset.id;
            // 预填充表单
            const mrRes = await $.get("http://localhost:3000/meetingroom", {rId});
            $("#rName").val(mrRes.data[0].rName);
            $("#config").val(mrRes.data[0].config);
            $("#number").val(mrRes.data[0].number);
            $("#state").val(mrRes.data[0].state ? "1" : "0");
            $("#state").removeAttr("disabled")

            formState = 1;
        })

        // 提交员工信息
        $("#add-submit").click(async function(){
            // 获取表单数据
            const formData = $.parse($(".add-form").serialize());
            console.log(formData);
            if(formState === 0){
                // 新增
                const addRes = await $.post("http://localhost:3000/meetingroom/add", formData );
                alert(addRes.msg);
                if(addRes.code === 1){
                    location.reload();
                }
            }else{
                // 修改
                formData.rId = rId;
                const setRes = await $.post("http://localhost:3000/meetingroom/set", formData );
                alert(setRes.msg);
                if(setRes.code === 1){
                    location.reload();
                }
            }
        })

        // 加载表格功能插件
        const tablePlugins = "assets/js/plugins/datatables";
        $("<script>").attr("src", tablePlugins + "/jquery.dataTables.min.js").appendTo($("body"));
        $("<script>").attr("src", tablePlugins + "/dataTables.bootstrap4.min.js").appendTo($("body"));
        $("<script>").attr("src", tablePlugins + "/buttons/dataTables.buttons.min.js").appendTo($("body"));
        $("<script>").attr("src", tablePlugins + "/buttons/buttons.print.min.js").appendTo($("body"));
        $("<script>").attr("src", tablePlugins + "/buttons/buttons.html5.min.js").appendTo($("body"));
        $("<script>").attr("src", "assets/js/pages/be_tables_datatables.min.js").appendTo($("body"));
    })();
</script>
</body>
</html>
